import { Select } from 'antd'
import React, { Component } from 'react'
import { config } from 'utils'
import PropTypes from 'prop-types'

const { api } = config
const { systemprocess } = api
const Option = Select.Option

class SystemProcessSelect extends Component {
  constructor (props) {
    super(props)
    this.state = {
      SystemProcessSelectOptions: [],
    }
  }

  componentDidMount () {
    this.fetch()
  }

  fetch = () => {
    const url = `${systemprocess}/list`
    this.promise = fetch(url, {
      method: 'POST',
      mode: 'cors', // 避免cors攻击
      credentials: 'include',
    }).then((response) => {
      return response.json()
    }).then((json) => {
      let options = json.map(json => (<Option key={json.id}> {json.appId} </Option>))
      this.setState({
        SystemProcessSelectOptions: options,
      })
    }).catch((ex) => {
      console.log('parsing failed', ex)
    })
  }

  onSelect = (value, option) => {
    this.props.callback(value)
  }

  render () {
    return (<div>
      <Select
        allowClear
        labelInValue
        showSearch
        style={{ width: 200 }}
        placeholder="选择租户"
        onSelect={this.onSelect}
      >
        {this.state.SystemProcessSelectOptions}
      </Select></div>
    )
  }
}

SystemProcessSelect.propTypes = {
  callback: PropTypes.func,
  selectValue: PropTypes.string,
}

export default SystemProcessSelect
